<script setup lang="ts">
import NodeStyleBase from './components/NodeStyleBase.vue'
import EdgeStyleBase from './components/EdgeStyleBase.vue'
import GraphAttrs from './components/GraphAttrs.vue'
import { Cell, Graph } from '@antv/x6'
import lodash from '@utils/lodash'
import { useYkEditorDrawStore } from '@yk/components/draw/editor-draw/store'

const store = useYkEditorDrawStore()
// 订阅画布实例
const graph = computed(() => store.graph as Graph)

// 当前选中的Cell
const selectCell = ref<Cell>(null)
// 是节点
const isNode = shallowRef(false)
// 是边
const isEdge = shallowRef(false)

onMounted(() => {
  // --
})

onBeforeUnmount(function () {
  graph.value.off('cell:selected', updateAttrsBar)
  graph.value.off('cell:unselected', updateAttrsBar)
})

// region TODO 初始化
const stopInitWatch = watch(graph, () => {
  initAttrsBar()
  stopInitWatch()
})
function initAttrsBar () {
  if (graph.value) {
    graph.value.on('cell:selected', updateAttrsBar)
    graph.value.on('cell:unselected', updateAttrsBar)
  }
}
// endregion

// region TODO 更新属性栏显示
// 自定义属性模块 - 样式
const styleAttrModules = shallowRef([])
// 自定义属性模块 - 数据
const dataAttrModules = shallowRef([])
let oldSelectCell: Cell = null
async function _updateAttrsBar () {
  const cells = graph.value.getSelectedCells()
  const _styleAttrModules = []
  const _dataAttrModules = []
  if (cells.length > 0) {
    // 获取选中项
    const cell = cells[0]
    if (!oldSelectCell || oldSelectCell.shape !== cell.shape) {
      styleAttrModules.value = []
      dataAttrModules.value = []
    }
    oldSelectCell = cell
    console.log(cell)
    selectCell.value = cell
    // 判断节点还是边
    isNode.value = cell.isNode()
    isEdge.value = cell.isEdge()
    // 如果存在自定义属性栏
    if (cell.data?.getAttrModules) {
      // 获取自定义属性栏列表
      const modules = cell.data.getAttrModules()
      // 遍历并加载组件
      for (let i = 0, len = modules.length; i < len; i++) {
        const item = modules[i]
        const e = await item.components()
        item.component = markRaw(e.default)
        switch (item.group) {
          case 'Data':
            _dataAttrModules.push(item)
            break
          case 'Attrs':
            _styleAttrModules.push(item)
            break
        }
      }
    }
  } else {
    // 全部取消选中，清理数据
    selectCell.value = null
    isNode.value = isEdge.value = false
  }
  styleAttrModules.value = _styleAttrModules
  dataAttrModules.value = _dataAttrModules
  updateAttrTabs()
}
const updateAttrsBar = lodash.debounce(_updateAttrsBar, 32)
// endregion

// region TODO 选项卡
// 当前选中的选项卡
const activeTab = shallowRef<'Graph' | 'Attrs' | 'Data'>('Graph')
// 记录上次选中的非Graph选项卡
const historyTab = shallowRef<'Attrs' | 'Data'>('Attrs')
// 显示数据栏
const isShowData = shallowRef(false)
// 更新Tabs栏选中
const updateAttrTabs = lodash.debounce(function () {
  if (selectCell.value) {
    let _activeTab = activeTab.value === 'Graph' ? historyTab.value : activeTab.value
    if (dataAttrModules.value.length < 1) {
      isShowData.value = false
      _activeTab = 'Attrs'
    } else {
      isShowData.value = true
    }
    activeTab.value = _activeTab
    historyTab.value = activeTab.value
  } else {
    activeTab.value !== 'Graph' && (historyTab.value = activeTab.value)
    activeTab.value = 'Graph'
    isShowData.value = false
  }
}, 150)
// endregion

// region TODO
const collapseNames = ref(['基础属性', '基本样式', '数据源', '功能', '图片'])
// endregion
</script>

<template>
  <div class="attr-bar wh-100">
    <el-tabs v-model="activeTab" type="border-card">
      <!--属性-->
      <template v-if="selectCell">
        <el-tab-pane label="属性" name="Attrs">
          <el-collapse v-model="collapseNames">
            <el-form
              size="small" label-position="top"
              @submit.prevent
              @keydown.enter.prevent
            >
              <!--节点通用属性-->
              <node-style-base v-if="isNode" :cell="selectCell" />
              <!--线通用属性-->
              <edge-style-base v-if="isEdge" :cell="selectCell" />
              <!--自定义属性-->
              <el-collapse-item
                v-for="(item, index) in styleAttrModules" :key="index" :title="item.title"
                :name="item.title"
              >
                <component :is="item.component" v-if="item.component" :cell="selectCell" />
              </el-collapse-item>
            </el-form>
          </el-collapse>
        </el-tab-pane>
      </template>
      <!--画布-->
      <el-tab-pane v-else label="画布" name="Graph">
        <el-form size="small" label-position="top" @submit.prevent @keydown.enter.prevent>
          <graph-attrs />
        </el-form>
      </el-tab-pane>
      <!--数据-->
      <el-tab-pane label="数据" name="Data" :disabled="!isShowData">
        <el-collapse v-model="collapseNames">
          <el-form size="small" label-position="top" @submit.prevent @keydown.enter.prevent>
            <!--自定义属性-->
            <template v-for="(item, index) in dataAttrModules" :key="index">
              <component
                :is="item.component"
                v-if="item.component"
                :cell="selectCell"
                :solution="item.solution"
              />
            </template>
          </el-form>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.attr-bar {
  width: 260px;
  background-color: white;
  box-shadow: -3px 0 6px 0 rgba(119, 119, 119, 0.2);
  position: relative;

  ::v-deep(.el-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-tabs__content {
      overflow: auto;
    }
  }
}
.attr-bar:deep {
  .attr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4px;
  }
  .el-form-item--small {
    margin-bottom: 8px;
  }
  .el-input-number--small {
    width: 100%;
  }
  .el-input-group__append, .el-input-group__prepend {
    padding: 0 8px;
  }
  .el-slider {
    --el-slider-button-size: 12px
  }
}
</style>
